import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Icon } from 'components/atoms';

import { useDispatch, useSelector } from 'react-redux'

import { callGetNewsApi } from 'utils/networking';
import { setSelectId , deleteSelectId} from 'redux/actions/LiveFeedActions'

const useStyles = makeStyles(theme => ({
  root: {
    background: '#000',
  },
  textWhite: {
    color: 'white',
  },
  genresBox: {
    height: "300px",
    minHeight: "150px",
    overflowY: 'auto',
    display: "flex",
    alignItems: "center",
    flexWrap: "wrap"
  },
  searchTitle: {
    fontSize: "32px",
    lineHeight: "1.2",
    margin: "15px 0 20px",
    color: "white",
  },
  itemContent: {
    marginBottom: "0",
    [theme.breakpoints.up('md')]: {
      marginBottom: "50px",
    },
  },
  filterText: {
    fontSize: "20px",
    color: "#E24575",
    margin: "10px 0",
  },
  filterItem: {
    fontSize: "18px",
    color: "#fff",
    lineHeight: "24px",
  },
  filterBox: {
    background: "#3f51b5",
    padding: "4px 12px",
    borderRadius: "16px",
    marginLeft: "5px",
    marginTop: "10px",
    cursor: "pointer",
    transition: "all 0.3s"
  },
  selectBox: {
    display: "flex",
    alignItems: "center",
    padding: "10px 0"
  },
  selectItem: {
    fontSize: "20px",
    background: "#E24575",
    cursor: "pointer",
    textAlign: "center",
    width: "50%",
    color: "#fff",
    borderRadius: "16px",
    [theme.breakpoints.up('sm')]: {
      width: "30%",
    },
    [theme.breakpoints.up('md')]: {
      width: "50%",
    },
  },
}));

const Genres = props => {

  const { className, ...rest } = props;
  const classes = useStyles();
  const theme = useTheme();

  const selectId = useSelector((state) => state.liveFeed.selectId);

  const dispatch = useDispatch()
  const [genresList, setGenresList] = useState([])

  useEffect(() => {
    getServerGenresProps();
  }, [])

  const getServerGenresProps = async () => {
    callGetNewsApi('song/genres', dispatch, (data) => {
      // console.log(data);
      setGenresList(data)
    });
  }

  const handleFilter = (index) => {
    dispatch(setSelectId(index));
  }

  const handleSelectAll = () => {
    let genresListIndex = []
    genresList.forEach((item) => {
      genresListIndex.push(item.id)
    })
    dispatch(setSelectId(genresListIndex));

  }

  return (
    <div className={clsx(classes.root, className)} {...rest}>
      <div className={classes.itemContent}>
        <h3 className={classes.searchTitle}>Genres</h3>
        <div className={classes.selectBox}>
          <p className={classes.selectItem} onClick={handleSelectAll}>Select All</p>
          <p className={classes.selectItem} style={{ background: "#3f51b5" }} onClick={() => dispatch(deleteSelectId())}>Deselect All</p>
        </div>
        <div className={classes.genresBox}>
          {
            genresList.map((item, index) => (<div key={index} className={classes.filterBox} onClick={() => handleFilter(item.id)} style={{ background: selectId.some(ele => ele == item.id) ? "#E24575" : "#3f51b5" }}>
              <span className={classes.filterItem}>{item.title}</span>
              <Icon
                fontIconClass={`fas ${selectId.some(ele => ele == item.id) ? "fa-check" : "fa-plus"}`}
                style={{ color: "#fff", fontSize: "16px", padding: "0 5px", width: "20px" }}
              />
            </div>
            ))
          }
        </div>
      </div>
    </div>
  );
};

Genres.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
};

export default Genres;
